<template>
  <div class="box">
    <div class="input-item" v-for="(item, fieldKey) in g_dataList" :key="fieldKey">
      <!-- 这里的fieldKey是下标值 -->
      <div v-if="fieldKey != 0" class="query-type">
        <van-dropdown-menu style="margin-right: 3%">
          <van-dropdown-item
            v-model="item.query_concat"
            :options="g_basicData.SearchType"
            placeholder="AND"
          />
        </van-dropdown-menu>
      </div>
      <div v-else class="query-type-empty"></div>
      <!-- 以上逻辑是当下标为0则显示空样式 不为0则显示样式 -->
      <div class="model-type">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="item.field_name"
            :options="g_basicData.searchField"
            placeholder="主题"
          >
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>

      <div class="input-field">
        <van-field v-model="item.text" placeholder="请输入检索内容..." />
      </div>

      <div class="query-style">
        <van-dropdown-menu>
          <!-- 这里的v-model是同步更新 绑定的什么值-->
          <van-dropdown-item
            v-model="item.query_style"
            :options="g_basicData.queryStyle"
            placeholder="模糊"
          >
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>

      <div v-if="fieldKey != 0" class="input-controls">
        <!-- 减号 -->
        <span v-if="fieldKey != 1 || g_dataList.length > 2" @click="act_delInputBox(item)">
          <van-icon style="margin-right: 20%" name="minus" />
        </span>
        <span v-else>
          <van-icon />
        </span>
        <!-- 加号 -->
        <span
          v-if="fieldKey == g_dataList.length - 1 && g_dataList.length < 10"
          @click="act_addInputBox(item)"
        >
          <van-icon name="plus" />
        </span>
      </div>
      <div v-else class="input-controls-empty"></div>
    </div>

    <div class="cell-time">
      <van-cell title="选择开始日期：" :value="startDate" @click="show = true" />
      <van-calendar v-model:show="show" v-model="g_timeData[0].text" @confirm="onConfirm" />
      <van-cell title="选择结束日期：" :value="endDate" @click="endShow = true" />
      <van-calendar v-model:show="endShow" v-model="g_timeData[1].text" @confirm="endOnConfirm" />
    </div>
    <div class="action-section">
      <van-button
        @click="act_reset"
        style="background-color: #90caf9; color: white; margin-right: 24px"
        >重置条件</van-button
      >
      <van-button style="width: 40%; background-color: #42a5f5; color: white" @click="act_searching"
        >检索</van-button
      >
    </div>

    <div>
      <van-list v-for="item in g_tableData" :key="item" class="tableData">
        <van-cell title="标题：" :value="item.title" />
        <van-cell title="作者：" :value="item.author" />
        <van-cell title="关键词：" :value="item.keyword" />
        <van-cell title="期刊：" :value="item.press_title" />
        <van-cell title="分类：" :value="item.classify" />
        <van-cell title="日期：" :value="item.date" />
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 基础信息
const g_basicData = reactive({
  SearchType: [
    { text: 'AND', value: 'AND' },
    { text: 'OR', value: 'OR' },
    { text: 'NOT', value: 'NOT' }
  ],
  searchField: [
    { text: '题名', value: 'title' },
    { text: '作者', value: 'author' },
    { text: '刊名', value: 'press_title' },
    { text: '刊数', value: 'issue' },
    { text: '关键词', value: 'keyword' },
    { text: '分类', value: 'classify' },
    { text: '地区', value: 'area' }
  ],
  // 检索模式
  queryStyle: [
    { text: '精确', value: 'precise' },
    { text: '模糊', value: 'fuzzy' }
  ]
})

// 初始数据
const g_initialData = [
  { index: 1, field_name: 'title', text: '', query_style: 'precise' },
  {
    index: 2,
    field_name: 'author',
    query_concat: 'AND',
    text: '',
    query_style: 'precise'
  },
  {
    index: 3,
    field_name: 'press_title',
    query_concat: 'AND',
    text: '',
    query_style: 'precise'
  }
]

// 将初始数据（默认值） 展开 并形成一个新的数组
const g_dataList = ref([...g_initialData])

// 存储时间数据
const g_timeData = ref([
  { index: 90, field_name: 'date', text: '', query_style: 'precise' },
  { index: 100, field_name: 'date', text: '', query_style: 'precise' }
])

// 增加搜索容器
const act_addInputBox = (item) => {
  if (g_dataList.value.length < 10) {
    const dataList = g_basicData.searchField[item.index]
    g_dataList.value.push({
      ...item,
      field_name: dataList.value,
      index: item.index + 1
    })
  }
}

// 减少搜索容器
const act_delInputBox = (item) => {
  g_dataList.value = g_dataList.value.filter((filtered) => filtered.index != item.index)
}

// 重置条件
const act_reset = () => {
  g_dataList.value = [
    { index: 1, field_name: 'title', text: '', query_style: 'precise' },
    { index: 2, field_name: 'author', query_concat: 'AND', text: '', query_style: 'precise' },
    { index: 3, field_name: 'press_title', query_concat: 'AND', text: '', query_style: 'precise' }
  ]
  // 也就是恢复到初始值
  g_timeData.value = [
    { index: 90, field_name: 'date', text: '', query_style: 'precise' },
    { index: 100, field_name: 'date', text: '', query_style: 'precise' }
  ]
}

import { showToast } from 'vant'

import { showLoadingToast } from 'vant'

// 检索
const act_searching = () => {
  // 整理数据
  const dataList = g_dataList.value.filter((filtered) => filtered.text.trim() !== '')
  const timeList = g_timeData.value.filter((filtered) => filtered.text.trim() !== '')
  const retrieveData = [...dataList, ...timeList]

  // 检索数据的数组长度为 0，则没有有效检索词，提示输入检索词弹框
  if (retrieveData.length === 0) {
    showToast('提示内容')
    return
  }

  // >0则提示
  showLoadingToast({
    message: '加载中...',
    forbidClick: true
  })

  get_AppDataList(retrieveData)
}

import { getAppDataList } from '@/http/api/RetrievalService/index'

// 表格数据
const g_tableData = ref([])

// response是后端返回的数组对象
const get_AppDataList = (dataList) => {
  dataList[0]['dataType'] = 'periodicals'

  const searchData = {
    searchData: dataList,
    pageNum: 1,
    pageSize: 10
  }

  showLoadingToast({
    message: '加载中...',
    forbidClick: true
  })

  getAppDataList(searchData).then(function (response) {
    // .then是回调成功 打印返回数据到控制台
    // console.log('期刊', response)
    // 更新表格数据
    g_tableData.value = response.rows
  })
}

//选择开始时间
const show = ref(false)
const startDate = ref('')
const formatDate = (startDate) => `${startDate.getMonth() + 1}/${startDate.getDate()}`
const onConfirm = (value) => {
  show.value = false
  startDate.value = formatDate(value)
  g_timeData.value[0].text = formatDate(value)
}
// 选择结束时间
const endShow = ref(false)
const endDate = ref('')
const endFormatDate = (endDate) => `${endDate.getMonth() + 1}/${endDate.getDate()}`
const endOnConfirm = (value) => {
  endShow.value = false
  endDate.value = endFormatDate(value)
  g_timeData.value[1].text = formatDate(value)
}
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.input-item {
  width: 100%;
  margin: 2% 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.query-type {
  width: 18%;
  margin-right: 1%;
  background-color: #ffffff;
}

.model-type {
  width: 18%;
  margin-right: 1%;
}

.query-style {
  width: 18%;
  margin-right: 1%;
}

.query-type-empty {
  width: 18%;
  margin-right: 1%;
}
/* 输入框 */
.input-field {
  background-color: #fff;
}

.input-controls {
  width: 18%;
  margin-left: 5%;
}

.btn-minus {
  margin-right: 1%;
}

.input-controls-empty {
  width: 18%;
  margin-left: 5%;
}

.time-horizon-section {
  margin-top: 10%;
}

.action-section {
  margin-top: 3%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10%;
}
.grid-data {
  width: 100%;
  margin-top: 3%;
}
.cell-time {
  margin-top: 3%;
}
.tableData {
  border-bottom: 1px solid rgb(152, 151, 151);
  margin-right: 2%;
  margin-left: 2%;
  border-top: 1px solid rgb(152, 151, 151);
}
::v-deep .van-cell__title,
::v-deep .van-cell__value {
  text-align: left;
  flex: none;
}
</style>
